import React, { Component } from 'react'
import { CSSTransition } from "react-transition-group"
import { connect } from 'react-redux'
import  { actionCreators }  from './store'
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    SearchWrapper,
    SearchInfo,
    SearchContent,
    SearchTitleWrapper,
    SearchTitle,
    SearchChange,
    SearchList,
    SearchItem,
    SearchItemDetail,
    Addition,
    Button,
} from './style'
class Header extends Component {
    searchinfo () {
        if () {
            <SearchInfo>
                <SearchContent>
                    <SearchTitleWrapper>
                        <SearchTitle>
                            热门城市
                        </SearchTitle>
                        <SearchChange>换一批</SearchChange>
                    </SearchTitleWrapper>
                    <SearchList>
                        <SearchItem><SearchItemDetail>信息</SearchItemDetail></SearchItem>
                        <SearchItem><SearchItemDetail>信息</SearchItemDetail></SearchItem>
                        <SearchItem><SearchItemDetail>信息</SearchItemDetail></SearchItem>
                        <SearchItem><SearchItemDetail>信息</SearchItemDetail></SearchItem>
                        <SearchItem><SearchItemDetail>信息</SearchItemDetail></SearchItem>
                        <SearchItem><SearchItemDetail>信息</SearchItemDetail></SearchItem>
                        <SearchItem><SearchItemDetail>信息</SearchItemDetail></SearchItem>
                    </SearchList>
                </SearchContent>
            </SearchInfo>
        }
    }
    render () {
        return (
            <HeaderWrapper>
                <Logo></Logo>
                <Nav>
                    <NavItem className="left">首页</NavItem>
                    <NavItem className="left">下载App</NavItem>
                    <NavItem className="right">登陆</NavItem>
                    <NavItem className="right"><i className="iconfont">&#xe636;</i></NavItem>
                    <SearchWrapper>
                        <CSSTransition 
                            in={this.props.focused}
                            timeout={200}
                            classNames="slide"
                        >
                            <NavSearch className={this.props.focused ? 'focused' : ''}
                            onFocus={this.props.inputHandleFocus}
                            onBlur={this.props.inputHandleBlur}
                            ></NavSearch>
                        </CSSTransition>
                        <i className={this.props.focused ? 'focused iconfont' : 'iconfont'}>&#xe608;</i>
                        

                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Button className="writting"><i className="iconfont">&#xe608;</i>写文章</Button>
                    <Button className="reg">登陆</Button>
                </Addition>
            </HeaderWrapper>
        )
    }
}

const mapStateToProps = (state) => ({
    focused: state.getIn(['header','focused'])
    //state.get('header').get('focused')
})

const mapDispatchToProps = (dispatch) => ({

    inputHandleFocus () {
        dispatch(actionCreators.inputFocusAction())
    },

    inputHandleBlur () {

        dispatch(actionCreators.inputBlurAction())
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(Header)


